<template>
  <div class="discoverIndex">
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 个人推荐 -->
        <el-tab-pane label="个人推荐" name="recommended"> </el-tab-pane>
        <!-- 歌单 -->
        <el-tab-pane label="歌单" name="playlist"> </el-tab-pane>
        <el-tab-pane label="主播电台" name="radiolist"></el-tab-pane>
        <!-- 排行榜 -->
        <el-tab-pane label="排行榜" name="ranklist"> </el-tab-pane>
        <!-- 歌手 -->
        <el-tab-pane label="歌手" name="singerlist"> </el-tab-pane>
        <el-tab-pane label="最新音乐" name="newmusic"></el-tab-pane>
      </el-tabs>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "DiscoverIndex",
  components: {},
  props: {},
  data() {
    return {
      activeName: "recommended"
    };
  },
  computed: {},
  watch: {
    $route() {
      this.activeName = this.$route.name;
      this.newmusic();
    }
  },
  created() {
    this.activeName = this.$route.name;
    this.newmusic();
  },
  mounted() {},
  methods: {
    handleClick(tab) {
      this.newmusic();
      this.activeName = tab.name;
      this.$router.push({
        path: `/discover/${tab.name}`
      });
    },
    newmusic() {
      if (this.$route.meta.activeNewmusic == "newmusic") {
        this.activeName = "newmusic";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-carousel__indicator {
  padding: 0.9375rem 0.3125rem;
}
/deep/.container {
  width: 100%;
  height: 100%;
}
/deep/.el-tabs__nav-wrap::after {
  display: none;
}

/deep/.is-active {
  font-size: 18px;
  color: #000;
}
</style>
